<template>
	<!-- 购买商品选择分类组件 -->
	<view class="spec-selector">
		<!-- 服务保障 -->
		<view class="service-tag" v-for="(service, index) in serviceinfo" :key="index">
			<u-icon name="checkmark-circle" size="16" color="#e74c3c"></u-icon>
			<text class="tag-text">{{service}}</text>
		</view>

		<view>
			<u-row>
				<u-col span="4">
					<u--image src="https://pic1.imgdb.cn/item/685a952658cb8da5c86c2344.png" width="80px"
						height="80px"></u--image>
				</u-col>
				<u-col span="18">
					<!-- 发货信息 -->
					<view class="goods-header">
						<view class="goods-title">{{shippinginfo.usrnm +'  '+ shippinginfo.addressdetail}}</view>
						<view class="shipping-info">
							<text class="shipping-tag">{{shippinginfo.zip}}</text>
							<text class="shipping-time">{{shippinginfo.shippingtime}}</text>
						</view>
					</view>

					<!-- 价格和库存 -->
					<view class="price-section">
						<text class="current-price">￥{{ hadselecttype.price }}</text>
						<!-- <text class="stock">{{stockinfo.havestock==1?'(有货)':'(无货)'}}</text> -->
						<u-number-box v-model="buycount" :min="1" :max="hadselectsize.qty" integer></u-number-box>
					</view>
				</u-col>
			</u-row>



		</view>

		<!-- 款式组合选择 -->
		<scroll-view scroll-y :style="{height: '400rpx'}">
			<view class="spec-section">
				<view class="spec-title">款式（{{ this.typeOptions.length }}）</view>
				<view class="color-options">
					<view v-for="(option, index) in typeOptions" :key="index" class="color-option"
						:class="{active: selectedtypeid === option.id}" @click="selecttype(option)">
						<text class="color-name">{{option.name}}</text>
						<text class="color-tip" v-if="option.tip">{{option.tip}}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 尺码选择 -->
		<view class="spec-section">
			<view class="spec-title">尺码（{{ this.sizeOption.length }}）</view>
			<view class="size-recommend">
				<text>请选择尺码</text>
				<!--  <text>根据当前档案和购买习惯 推荐 </text>
        <text class="recommend-size">31</text>
        <text> 【适合... 档案待确认></text> -->
			</view>
			<view class="size-options">
				<view v-for="size in sizeOption" :key="size.value" class="size-option"
					:class="{active: selectedSizeid === size.id, recommended: size.recommended}"
					@click="selectSize(size)">
					<text class="size-value">{{size.value}}</text>
					<text class="size-desc" v-if="size.desc">{{size.desc}}</text>
					<text class="size-desc">剩余:({{size.qty}})</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<u-button type="warning" shape="circle" customStyle="width:200rpx;height:80rpx;" @click="addToCart"
				:disabled="hadselectsize.qty==0">加入购物车</u-button>
			<u-button type="error" shape="circle" customStyle="width:200rpx;height:80rpx;margin-left:20rpx;"
				@click="confirmadd" :disabled="hadselectsize.qty==0">立即购买￥{{ goodsprice }}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		props: {
			receivedata: {
				type: Object,
				default: () => ({}),
			},
		},
		computed: {
			//获取商品价格
			goodsprice() {
				let items = this.typeOptions.find(item => item.id === this.selectedtypeid);
				return items ? items.price : 0;
			},
			//获取商品下的尺码信息
			sizeOption() {
				let items = this.typeOptions.find(item => item.id === this.selectedtypeid);
				return items ? items.sizeOptions : [];
			},
			//获取商品下剩余数
			goodsqty() {
				let items = this.sizeOption.lenght > 0 ? this.sizeOption.find(item => item.id === this.selectedSizeid) :
					null;
				console.log('items', items);
				console.log('sizeOption', this.sizeOption);
				return items ? items.qty : 0;
			},
		},
		mounted() {
			// 数据已通过 props 传入，直接使用
			this.typeOptions = this.receivedata['typeOptions'] ? this.receivedata['typeOptions'] : {}; //款式列表
			this.shippinginfo = this.receivedata['shippinginfo'] ? this.receivedata['shippinginfo'] : {}; //发货地址用户信息
			this.serviceinfo = this.receivedata['serviceinfo'] ? this.receivedata['serviceinfo'] : []; //服务信息
			//默认选择第一个
			this.selectedtypeid = this.typeOptions[0]['id'];
			this.selectedSizeid = this.sizeOption[0]['id'];
			this.hadselecttype = this.typeOptions[0];
			this.hadselectsize = this.sizeOption[0];
			console.log('this.hadselectsize', this.hadselectsize);
		},
		data() {
			return {
				logining: false,
				buycount: 1,
				selectedtypeid: -1,
				selectedSizeid: -1,
				hadselecttype: {}, //当前选中的款式
				hadselectsize: {}, //当前选中的尺码
				typeOptions: [],
				serviceinfo: [],
				shippinginfo: {},
			}
		},
		methods: {
			emitdata() {
				this.$emit('selectdata', {
					buycount: this.buycount, //购买数量
					selectedSize: this.selectedSizeid, //选择尺码
					selecttype: this.selectedtypeid, //选择款式
				});
			},
			selecttype(option) {
				this.selectedtypeid = option.id;
				this.hadselecttype = option;
				//选择款式后尺码默认第一个
				this.selectedSizeid = this.sizeOption[0]['id'];
				this.hadselectsize = this.sizeOption[0];
				this.buycount = 1;
				this.emitdata();
			},
			selectSize(option) {
				this.selectedSizeid = option.id;
				this.hadselectsize = option;
				this.buycount = 1;
				this.emitdata();
			},
			//添加到购物车
			async addToCart() {
				if (this.selectedtypeid === -1 || !this.selectedSizeid === -1) {
					uni.showToast({
						title: '请选择颜色和尺码',
						icon: 'none'
					});
					return;
				}
				// uni.showToast({ title: '已加入购物车' });
				try {
					this.logining = true;
					const data = {
						buycount: this.buycount, //购买数量
						selectedSize: this.selectedSizeid, //选择尺码
						selecttype: this.selectedtypeid, //款式
					}
					const result = await httpsend('addtocart', JSON.stringify(data));
					if (result?.code === 1) {
						this.logining = false;
						this.$api.msg(result.msg);
						//关闭弹窗
						this.$emit('isshowform', {
							isvisible: false,
						});
					} else {
						this.$api.msg(result.msg);
						this.logining = false;
					}

				} catch (err) {
					console.log('err', err);
					this.logining = false;
				}
			},
			//确认购买
			async confirmadd() {
				this.emitdata();
				//关闭弹窗
				this.$emit('isshowform', {
					isvisible: false,
				});
				
				try {
					const param = {
						id: this.receivedata.id,
						size: this.selectedtypeid,
						type: this.selectedtypeid,
						quantity: this.buycount
					};
					//立即购买创建一个待支付订单
					const res = await httpsend('buynow', JSON.stringify(param));
					if (res?.code === 1) {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/order/payment?id=' + res.id
						});
					} else {
						this.$api.msg(res.msg);
					}
				} catch (err) {
					console.log('err', err);
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.spec-selector {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.service-tag {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.tag-text {
			font-size: 24rpx;
			color: #e74c3c;
			margin-left: 8rpx;
		}
	}

	.goods-header {
		margin-bottom: 20rpx;

		.goods-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}

		.shipping-info {
			display: flex;
			align-items: center;

			.shipping-tag {
				font-size: 22rpx;
				color: #fff;
				background-color: #e74c3c;
				padding: 4rpx 12rpx;
				border-radius: 4rpx;
				margin-right: 12rpx;
			}

			.shipping-time {
				font-size: 22rpx;
				color: #666;
			}
		}
	}

	.price-section {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.current-price {
			font-size: 36rpx;
			color: #e74c3c;
			font-weight: bold;
			margin-right: 20rpx;
		}

		.stock {
			font-size: 24rpx;
			color: #666;
		}
	}

	.spec-section {
		margin-top: 20rpx;
		margin-bottom: 30rpx;

		.spec-title {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 16rpx;
		}

		.size-recommend {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 16rpx;

			.recommend-size {
				color: #e74c3c;
				font-weight: bold;
			}
		}
	}

	.color-options {
		display: flex;
		flex-wrap: wrap;

		.color-option {
			width: 100%;
			padding: 16rpx;
			margin-bottom: 12rpx;
			border: 1rpx solid #eee;
			border-radius: 8rpx;

			&.active {
				border-color: #e74c3c;
				background-color: #fef0f0;
			}

			.color-name {
				font-size: 26rpx;
				color: #333;
			}

			.color-tip {
				font-size: 22rpx;
				color: #e74c3c;
				margin-left: 12rpx;
			}
		}
	}

	.size-options {
		display: flex;
		flex-wrap: wrap;

		.size-option {
			width: 120rpx;
			padding: 16rpx 0;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			text-align: center;
			border: 1rpx solid #eee;
			border-radius: 8rpx;

			&.active {
				border-color: #e74c3c;
				background-color: #fef0f0;
			}

			&.recommended {
				position: relative;

				&::after {
					content: '荐';
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 36rpx;
					height: 36rpx;
					background-color: #e74c3c;
					color: #fff;
					font-size: 20rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.size-value {
				font-size: 26rpx;
				color: #333;
				font-weight: bold;
			}

			.size-desc {
				display: block;
				font-size: 22rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}
</style>